<script setup>
import ClubItem from './ClubItem.vue'
import MiddleBar from "./MiddleBar.vue";
import EventContent from "./EventContent.vue";
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination'; // 轮播图底面的小圆点
import 'swiper/css/navigation'; // 轮播图两边的左右箭头
import 'swiper/css/scrollbar' ; // 轮播图的滚动条
import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper/modules';
import {ref} from "vue";
const modules = [Autoplay, Pagination, Navigation, Scrollbar]
const image=ref("../resource/pexels-boris-pavlikovsky-5499117.jpg")

const hotNewsItems=ref( [
  { date: '2022-01-01', activity: '活动一', details: '这是活动一的详细信息。' },
  { date: '2022-02-01', activity: '活动二', details: '这是活动二的详细信息。' },
  { date: '2022-03-01', activity: '活动三', details: '这是活动三的详细信息。' },
  { date: '2022-04-01', activity: '活动四', details: '这是活动四的详细信息。' },
  { date: '2022-05-01', activity: '活动五', details: '这是活动五的详细信息。' }
])
const  showMore=ref( false)
const currentIndex=ref( -1  )
const showDetails=(index)=>{
  showMore.value = true;
  currentIndex.value = index;
}
const hideDetails=()=> {
  showMore.value = false;
  currentIndex.value = -1;
}


const activeName = ref('1')
</script>

<template>
  <div class="body">
    <div class="HotSpots">
      <div class="HotSpots-Container">
        <div class="HotClubs">
          <swiper class="swiper-container"
              :modules="modules"
              :slides-per-view="1"
              :space-between="50"
              :autoplay="{ delay: 4000, disableOnInteraction: false }"
              navigation
              :pagination="{ clickable: true }"
              :scrollbar="{ draggable: true }">
            <swiper-slide>
          <img src="@/resource/Images/pexels-boris-pavlikovsky-5499117.jpg" alt="">
            </swiper-slide>
            <swiper-slide>
              <img src="@/resource/Images/pexels-boris-pavlikovsky-5499117.jpg" alt="">
              </swiper-slide>
              <swiper-slide>
              <img src="@/resource/Images/pexels-boris-pavlikovsky-5499117.jpg" alt="">
              </swiper-slide>
          </swiper>
        </div>
        <div class="HotNews">
          <div class="HotNews-Title">
            热门活动
          </div>
          <div class="HotNews-List">
            <el-collapse v-model="activeName" accordion>
              <el-collapse-item class="HotNews-item" :name="index" v-for="(item,index) in hotNewsItems" :key="index">
                <template #title>
                  <span class="date">{{ item.date }}</span>
                  <span class="activity">{{ item.activity }}</span>
                </template>
                <div class="details">

                  {{ item.details }}
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
    </div>

    <MiddleBar :title="'社团'" />
    <div class="clubs-show">
      <div class="clubs-container">
        <ClubItem :cover="image"></ClubItem>
        <ClubItem :cover="image"></ClubItem>
      </div>
    </div>
    <MiddleBar title="社团活动" />
    <div class="event-show">
      <EventContent></EventContent>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use "@/styles/color-var-prim" as prim;
@use"@/styles/color-var-sub" as sub;
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 定义变量
$font-weight-bold: bold;
$font-size-24px: 24px;
$font-size-18px: 18px;
$font-size-14px: 14px;
$color-555: #555;
$color-FF416C: #FF416C;
$background-color-f9f9f9: #f9f9f9;
$background-color-fff: #fff;
$background-color-e0e0e0: #e0e0e0;

.HotSpots{
  @include flex-center;
  width: 100%;

  .HotSpots-Container {
    @include flex-center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0 5%;
    gap: 2rem;

    .HotClubs {
      width: 45%;
      margin: 0 1rem;

      img {
        width: 100%;
        height: 40rem;
        object-fit: cover;
      }
    }

    .HotNews {
      width: 45%;
      height: 50vh;
      margin: 3rem 1rem;
      background-color: $background-color-f9f9f9;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      .HotNews-item{
        margin-left: 1rem;
        min-height: 4rem;
        background-color: $background-color-fff;
      }
      &-Title {
        font-size: $font-size-24px;
        font-weight: $font-weight-bold;
        margin-bottom: 15px;

        &:after {
          content: "";
          display: block;
          width: 50%;
          height: 3px;
          background: sub.$background-gradient-primary;
        }
      }

      &-List {
        list-style-type: none;
        padding: 0;
        li{
          min-height: 4rem;
          background-color: $background-color-fff;
          margin-bottom: 20px;
          padding: 15px;
          border-radius: 4px;
          transition: background-color 0.3s;

          &:hover{
            background-color: $background-color-e0e0e0;
          }
        }
      }
    }
  }
}

.date {
  font-weight: $font-weight-bold;
  margin-right: 10px;
}

.activity {
  font-size: $font-size-18px;
}

.details {
  display: block;
  margin-top: 10px;
  font-size: $font-size-14px;
  color: $color-555;
}

.clubs-show{
  @include flex-center;

  .clubs-container{
    min-height: 800px;
  }
}

.clubs-title{
  @include flex-center;
}

.swiper-container{
  margin: 3rem 0;
  border-radius: 30px;
  overflow: hidden;
}

.middle-header{
  padding: 4rem;
  background: sub.$background-gradient-primary;
  min-height: 30vh;

  .header-content{
    margin-top: 1rem;
    @include flex-center;
    gap: 3rem;
  }
}

.date{
  margin-right: 0.5rem;
  font-size: 1.5rem;
  color: $color-FF416C;
}
</style>
